<template>
  <div class="home" ref="home" @scroll="leaveTop">
    <!-- 顶部导航 -->
    <Navbar />
    <van-pull-refresh
      v-model="refreshing"
      success-text="刷新成功"
      @refresh="onRefresh"
    >
    <!-- 头部通知 -->
    <van-notice-bar
     left-icon="volume-o"
     background='#000'
     color="#fff"
     mode="closeable"
     text="在代码阅读过程。"
    />
    <!-- 搜索 -->
    <van-search
      v-model="searchIpt"
      shape="round"
      background="#C82519"
      placeholder="请输入搜索关键词"
      show-action
      disabled 
      >
      <template #left>
      <div class="search-left">三</div>
      </template>
      <template #action>
      <div @click="onSearch" class="search-btn">搜索</div>
      </template>
    </van-search>
    <!-- 轮播图懒加载 -->
    <van-swipe
      class="qf-swipe"
      :autoplay="3000"
      indicator-color='#CD2525'
    >
      <van-swipe-item v-for="item in images" :key="item._id">
        <img v-lazy="$api.baseImg + item.src" />
      </van-swipe-item>
    </van-swipe>
    <!-- 商品 -->
    <div class="good-list">
      <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
        immediate-check
      >
      <div class="row" v-for='i in rowLen' :key='i'>
        <GoodItem :good='goodArr[2*i-2] || {}' />
        <GoodItem :good='goodArr[2*i-1] || {}' />
      </div>
      </van-list>

    </div>
    </van-pull-refresh>
  </div>
</template>

<script>
import {Navbar, GoodItem} from '@/components'
export default {
  name: 'Home',
  components: {
    Navbar,
    GoodItem
  },
  data() {
    return {
      searchIpt: '',
      images: [
        // {
        //    id: 1,
        //     src: '//m.360buyimg.com/mobilecms/s700x280_jfs/t1/160127/32/9636/142251/60404255E9073cf97/36e9ec79358b3f6c.jpg!q70.jpg.dpg'
        //   },
        //   {
        //     id: 2,
        //     src: '//m.360buyimg.com/mobilecms/s700x280_jfs/t1/146252/35/12821/235895/5fa0c3c4E8ffab4f2/418e7537c6d54d8f.jpg!cr_1125x445_0_171!q70.jpg.dpg'
        //   },
        //   {
        //     id: 3,
        //     src: '//m.360buyimg.com/mobilecms/s700x280_jfs/t1/36958/34/5025/100639/5cbf5749Ee9fcfb22/b6eb36331095813a.jpg!cr_1125x445_0_171!q70.jpg.dpg'
        //   }
      ],
      n: 5,
      goodArr: [
        // { id: 1, name: '商品名称11', img: '', self: true, price: 100 },
        // { id: 2, name: '商品名称22', img: '', self: true, price: 200 }
      ],
      refreshing: true,
      loading: false,
      finished: false,
      page: 1,
      top: 0
    }
  },
  computed: {
     rowLen() {
      return Math.floor(this.goodArr.length/2)
    }
  },
  created() {
    this.$api.getBanner().then(res => {
      if(res) {
        this.images = res
      }
    })
    
  },
  mounted() {
    this.init();
  },
  activated() {
    console.log(this.top);
     this.$refs.home.scrollTop = this.top
  },
  methods: {
    init(){
      const params = {
        page: this.page,
        size: 6
      }
      this.$api.homeGoods(params).then(res => {
        console.log(res);
        if(this.page === 1) {
          this.goodArr = res.list;
          this.finished = false;
          this.refreshing = false
        }else {
          this.goodArr = [...this.goodArr, ...res.list]
          this.loading = false;
          if(this.goodArr.length >= res.total) this.finished = true;
        }
        // console.log(this.goodArr);
      })
    },
    onSearch() {
      this.$router.push('/tologin');
    },
    // 刷新成功
    onRefresh() {
      this.page = 1
      this.init();
    },
    onLoad() {
      this.page++
      this.init()
    },
    leaveTop(e) {
      this.top = e.target.scrollTop
    }
  }

}
</script>

<style lang="scss" scoped>
.home {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 5rem;
  overflow: auto;

  .search-left {
    color: #fff;  
    font-weight: bolder;
    margin-right: 12px;
  }
  .search-btn {
    font-size: .373333rem;
    color: #fff;
  }
  .van-swipe {
    margin: 1rem 1.5rem;

  .van-swipe-item {
    width: 35rem;
    height: 14rem;
    overflow: hidden;
    img {
      width: 100%;
      height: 100%;
      display: block;
      border-radius: 1rem;

    }
  }
  }

  .good-list {
    background-color: #F7F7F7;
    margin-bottom: 0.1rem;
    padding-top: 1rem;
    .row {
      margin: 0 0.8rem;
      display: flex;
      justify-content: space-between;
      .qf-good-item {
        background-color: #fff;
        border-radius: 0.8rem;
      }
      .qf-good-item:nth-child(2n) {
        margin: 0 0 1rem 0.5rem;
      }
    }
  }
}
</style>